<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
//接收父组件传递参数
const props = defineProps({
  // 标题内容
  title: {
    default: "",
  },
  // 显示右侧放大镜和加号
  showSearch: {
    default: false,
  },
  // 是否显示左侧
  showLeft: {
    default: false,
  },
  // 是否显示右侧三个点
  showThreePoints: {
    default: false,
  },
  showCamera: {
    default: false,
  },
});
// 接收父组件传来的方法
const emits = defineEmits(["pointsBtn", "closeshowRight", "isShowTan", "setCamera"]);
//气泡弹出框
const showPopover = ref(false);
// 搜索弹框
const showBottom = ref(false);
//跳转添加朋友
const getFriend = () => {
  console.log("1111");
  router.push("/friend");
};
//跳转到收款码页
const getcollection = (flag) => {
  router.push('/collection')
}
// 搜索按钮
const searchBtn = () => {
  emits('isShowTan')
};
const getscan = () => {
  router.push('/scan')
}
//相机
const setCamera = () => {
  emits('setCamera')
}

// 三个点按钮
const pointsBtn = () => {
  emits("pointsBtn");
};
const FH = () => {
  if (props.title == "设置" || props.title == "个人信息"
    || props.title == "朋友圈"
  ) {
    emits("closeshowRight");
  } else {
    router.go(-1);
  }
};
</script>

<template>
  <div class="navbar">
    <div class="nav_left">
      <van-icon name="arrow-left" :size="25" v-if="showLeft" @click="FH" />
    </div>
    <div class="nav_center">
      <p>{{ title }}</p>
    </div>
    <div class="nav_right">
      <div v-if="showSearch" class="search">
        <van-icon name="search" size="20" class="navicon" @click="searchBtn" />
        <van-popover v-model:show="showPopover" placement="bottom-end">
          <ul class="popver">
            <li><van-icon name="chat" size="20" /><span>发起群聊</span></li>
            <li @click="getFriend">
              <van-icon name="contact" size="20" /><span>添加朋友</span>
            </li>
            <li @click="getscan"><van-icon name="enlarge" size="20" /><span>扫一扫</span></li>
            <li @click="getcollection"><van-icon name="scan" size="20" /><span>收款码</span></li>
          </ul>
          <template #reference>
            <van-icon name="add-o" size="20" class="navicons" />
          </template>
        </van-popover>
        <!-- 搜索弹框 -->
        <van-popup v-model:show="showBottom" position="bottom" :duration="0.1"
          :style="{ height: '100%', backgroundColor: '#ededed' }" />
      </div>
      <div class="threePoints" v-if="showThreePoints">
        <van-icon name="ellipsis" :size="25" />
      </div>
      <div class="threePoints" v-if="showCamera">
        <van-icon name="photograph" :size="25" @click="setCamera" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: rgb(237, 237, 237);
  color: black;
  font-size: 15px;
  font-weight: bold;
}

.navicon {
  padding-right: 10px;
}

.nav_left {
  width: 80px;
  padding: 5px 0px 5px 10px;
}

.nav_right {
  width: 80px;

  .search {
    text-align: right;
  }

  .threePoints {
    text-align: right;
    padding: 5px 10px 5px 0;
  }
}

.navicons {
  padding-right: 10px;
}

.popver {
  width: 120px;
  height: 150px;
  padding: 10px;
  background-color: #fff;
}

.popver li {
  height: 34px;
  line-height: 34px;
  border-bottom: 1px solid #ccc;
  color: black;
}

.popver li span {
  padding-left: 10px;
}
</style>
